// pages/index/index.js
Page({

	// 事件 跳转到文章页
	imageClick: function(evt) {
		// console.log(evt.target.dataset.id)
		wx.navigateTo({
			url: '../article/article?id=' + evt.target.dataset.id
		})
	},

	/**
	 * 页面的初始数据
	 */
	data: {
		imageMode: "aspectFill",
		listLeft: [],
		listRight: [],
		leftHight: "",
		rightHight: "",
		headerImage: "",
		headerContent: "",
		//加载额外文章-是否显示加载中
		isLoading: false,
		//加载初始10条文章-是否显示加载中
		firstLoading: true,
		//正在加载 loadmore
		loadmoreING: false
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		var _this = this
		//加载文章
		this.loadArticle(_this)

		//加载首页头部信息
		this.loadHomeInfo()
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		//时间戳
		// console.log((new Date()).getTime())
	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {

	},
	// * 页面滚动触发事件的处理函数
	onPageScroll: function() {

	},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {
		var _this = this
		//显示顶部加载中
		this.setData({firstLoading: true})
		//清空文章
		this.setData({
			listRight: [],
			listLeft: []
		}, function() {
			//加载文章
			this.loadArticle(_this)
			//加载首页头部信息
			this.loadHomeInfo()
		})


	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		//加载更多
		this.loadMore()
	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},

	// 初始加载文章数据
	loadArticle: function(_this) {
		// 1. 获取数据库引用
		const db = wx.cloud.database()
		//设置 _ 命令
		const _ = db.command
		// 2. 构造查询语句
		// collection 方法获取一个集合的引用
		// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。API 也支持高级的查询条件（比如大于、小于、in 等），具体见文档查看支持列表
		// get 方法会触发网络请求，往数据库取数据[]
		// ==查不到数据==检查云端集合权限,检查权限,检查权限==
		// ==查不到数据==检查云端集合权限,检查权限,检查权限==
		db.collection('article')
			//asc低到高 desc高到低
			//编辑时间 从近到远
			.orderBy('time_edit', 'desc')
			// .skip(10) // 跳过结果集中的前 10 条，从第 11 条开始返回
			.limit(10) // 限制返回数量为 xx 条
			.get()
			.then(res => {
				// console.log(res.data)
				var tempData = [].concat(res.data);
				if (res.data) {
					//有数据
					_this.setImageHeight(tempData, {
						callback: (res1) => {
							console.log("高度设置完毕", res1);
							//不显示顶部的加载中
							_this.setData({firstLoading: false})
							//数据分左右
							_this.division(res1)
						}
					})

					//数据分左右
					// _this.division(tempData)

				}
			})
			.catch(err => {
				console.error(err)
			})

	},

	// 加载更多文章
	loadMore: function() {
		var _this = this
		if(!_this.data.loadmoreING){
			//当前 没有 正在加载
			
			//显示加载中
			//改变当前状态为 正在加载
			_this.setData({
				isLoading: true,
				loadmoreING: true
			})
			//获取当前有多少条数据
			var total = _this.data.listLeft.length + _this.data.listRight.length
			
			// 1. 获取数据库引用
			const db = wx.cloud.database()
			//设置 _ 命令
			const _ = db.command
			// 2. 构造查询语句
			db.collection('article')
				//asc低到高 desc高到低
				//编辑时间 从近到远
				.orderBy('time_edit', 'desc')
				.skip(total) // 跳过结果集中的前 10 条，从第 11 条开始返回
				.limit(10) // 限制返回数量为 xx 条
				.get()
				.then(res => {
					// console.log(res.data)
					var tempData = [].concat(res.data);
					if (tempData.length > 0) {
						//有数据
						//设置图片的高度
						_this.setImageHeight(tempData, {
							callback: res => {
								if (res) {
									//数据分左右
									_this.division(res)
								} else {
									//res没有数据
									//改变当前状态 当前 没有加载ing
									_this.setData({loadmoreING: false})
								}
							}
						})
			
					} else {
						//没有数据了 (所有文章加载完了)
						_this.setData({
							isLoading: false,
							loadmoreING: false
						})
					}
				})
				.catch(err => {
					console.log(err)
				})
		}else{
			//当前正在加载,不作操作
			
		}
		
	},


	//云端获取首页信息
	loadHomeInfo: function() {
		var _this = this
		//云端获取首页信息
		const db = wx.cloud.database()
		db.collection("homeInfo").doc("info").get({
			success: res => {
				// console.log(res.data)
				_this.setData({
					headerImage: res.data.image,
					headerContent: res.data.content
				})
			},
			fail: res => {
				console.log(res)
			}
		})
	},


	//数据分左右
	division: function(d) {
		var _this = this
		//数据分左右
		var tempL = [].concat(_this.data.listLeft)
		var tempR = [].concat(_this.data.listRight)
		//奇/偶数
		var n = 0
		if (_this.data.listLeft.length <= _this.data.listRight.length || _this.data.listLeft.length == 1) {
			//文章数量  左边 小于等于 右边
			//index为偶数push到左边, 为奇数push到右边
			n = 0
		} else {
			//文章数量  左边 大于 右边
			//index为奇数push到左边, 为偶数push到右边
			n = 1
		}

		for (var i = 0; i < d.length; i++) {
			if (i % 2 == n) {
				//奇数给左边
				tempL.push(d[i])
			} else {
				//偶数给右边
				tempR.push(d[i])
			}
		}
		// console.log(tempL, tempR)
		_this.setData({
			listLeft: [].concat(tempL),
			listRight: [].concat(tempR)
		})
		// console.log(_this.data.listLeft, _this.data.listRight)

		//不显示加载中
		//改变状态 当前没有 加载ing
		_this.setData({
			isLoading: false,
			loadmoreING: false
		})
	},

	// 为每个文章对象 新增一个高度 字段 
	// d 文章的集合
	// cb:对象,回调函数 约定使用方法 setImageHeight({ callback: res=>{} })
	setImageHeight: function(d, cb) {
		if (d) {
			if (d.length > 0) {
				// 计数器
				var count = d.length
				for (var i = 0; i < d.length; i++) {
					// 异步操作闭包
					(function(i) {
						//遍历每个集合
						//查询首图宽 高比例(图片容器基础宽度 是365rpx .body-right .body-left 设置好的)
						wx.getImageInfo({
							src: d[i].images[0],
							success: (res) => {
								// console.log(i+"的首图的宽高比:", res.width / res.height)
								if ((res.width / res.height) >= 1.35) {
									//横向构图的,也不能太窄了,大于1.35的,直接设置高度为300rpx
									d[i].imageH = "300rpx"
								} else {
									// 绝对比例 运算逻辑: 宽/高 = 365/height ===> 365/(宽/高)
									var h = parseInt(365 / (res.width / res.height))
									d[i].imageH = h + "rpx"
								}

								// console.log(i+ "的首图高度设置为:" + d[i].imageH)
								//计数器操作
								count--;
								if (count == 0) { //计数器归零 代表高度全部设置完毕
									//执行回调函数 把设置好高度的集合d 传给回调函数
									cb.callback(d)
								}
							},
							fail: (err) => {
								console.log(err)
								//如果遇到以外失败了 就设置一个默认的高度 300rpx
								d[i].imageH = 300 + "rpx"
								//计数器操作
								count--;
								if (count == 0) { //计数器归零 代表高度全部设置完毕
									//执行回调函数 把设置好高度的集合d 传给回调函数
									cb.callback(d)
								}
							}
						})

					})(i)
					// for-d循环结束
				}
			} else {
				// d是一个 空的数组 length=0
				cb.callback(null)
			}
		} else {
			//d 没有数据 null 或者 undefined
			cb.callback(null)
		}
	},

	//点击首页头部图片,预览
	onShowHeaderImage: function() {
		var _this = this
		wx.previewImage({
			urls: [].concat(_this.data.headerImage)
		})
	}

})
